import React, { Component } from 'react';
import {
  View,
  Text,
  ScrollView,
  StyleSheet,
  TouchableOpacity,
} from 'react-native';
import _ from 'lodash';
import PxToDp from '../../../utils/PxToDp';
import { changeCarStyle, fetchCompareCars } from '../../../actions/communicateAction';

class Style extends Component {
  render() {
    const bgColor = this.props.selected ? '#f8f8fb' : '#fff';
    return (
      <TouchableOpacity
        activeOpacity={0.6}
        style={[styles.modelWrapper, { backgroundColor: bgColor }]}
        onPress={() => this.props.onPress()}
      >
        <Text style={[styles.model]}>{this.props.text}</Text>
      </TouchableOpacity>
    );
  }
}

class ChooseStyle extends Component {
  constructor(props) {
    super(props);
    const { carStyles } = this.props;
    const style = [];
    for (let k = 0; k < carStyles.length; k += 1) {
      style[k] = false;
    }

    this.state = {
      style,
      carStyle: {},
    };
  }

  _styleSelected(index) {
    const arr = [];
    const { carStyles } = this.props;
    for (let k = 0; k < carStyles.length; k += 1) {
      arr[k] = false;
    }
    arr[index] = true;

    this.setState({ style: arr, carStyle: carStyles[index] });
  }

  _completed(carStyle) {
    const { dispatch, car } = this.props;
    dispatch(changeCarStyle(carStyle));
    if (!_.isEqual(car, carStyle)) {
      dispatch(fetchCompareCars([].concat(car.id, carStyle.id).join(','), true));
    }
    this.props.onPress();
  }

  render() {
    const { title, carStyles } = this.props;

    return (
      <View style={[styles.bgColor, styles.flex]}>
        <View style={[styles.wrapper]}>
          <View style={[styles.header]}>
            <TouchableOpacity
              activeOpacity={0.6}
              onPress={() => this.props.onPress()}
              style={[styles.cancel]}
            >
              <Text style={[styles.cancelText]}>取消</Text>
            </TouchableOpacity>
            <Text style={[styles.title]}>{title}</Text>
            <TouchableOpacity
              activeOpacity={0.6}
              onPress={() => this._completed(this.state.carStyle)}
              style={[styles.completed]}
            >
              <Text style={[styles.completedText]}>完成</Text>
            </TouchableOpacity>
          </View>
          <ScrollView contentContainerStyle={[styles.scrollContainer]}>
            {
            carStyles && carStyles.map((carStyle, index) => (
              <Style
                key={carStyle.text}
                text={carStyle.text}
                selected={this.state.style[index]}
                onPress={() => this._styleSelected(index)}
              />
            ))
          }
          </ScrollView>
        </View>
      </View>
    );
  }
 }

const styles = StyleSheet.create({
  bgColor: {
    justifyContent: 'flex-end',
    backgroundColor: 'transparent',
    alignItems: 'center',
  },
  flex: {
    flex: 1,
  },
  wrapper: {
    width: '100%',
    height: PxToDp(250),
    backgroundColor: '#fff',
  },
  header: {
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
    height: PxToDp(44),
    backgroundColor: '#f8f8fb',
  },
  title: {
    color: '#333',
    fontSize: PxToDp(16),
  },
  scrollContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
    backgroundColor: '#fff',
  },
  modelWrapper: {
    justifyContent: 'center',
    alignItems: 'flex-start',
    width: '100%',
    height: PxToDp(44),
    paddingLeft: PxToDp(18),
    borderColor: '#ddd',
    borderBottomWidth: 1,
  },
  model: {
    color: '#333',
    fontSize: PxToDp(16),
  },
  cancel: {
    position: 'absolute',
    left: PxToDp(20),
    top: PxToDp(12),
  },
  cancelText: {
    color: '#666',
    fontSize: PxToDp(18),
  },
  completed: {
    position: 'absolute',
    right: PxToDp(20),
    top: PxToDp(12),
  },
  completedText: {
    color: '#f65252',
    fontSize: PxToDp(18),
  },
});

export default ChooseStyle;
